<template>
  <view class="mdlBox">
    <view class="user-info-box">
      <view class="portrait-box">
		  
        <image class="portrait" :src="userInfo.head_portrait" v-if="userInfo.head_portrait"></image>
        <image class="portrait" src="/static/missing-face.png" v-else></image>
        <text class="username">
          {{ userInfo && (userInfo.nickname || userInfo.realname) || user_info.nickname || userInfo.username ||'请先登录'}}
        </text>
      </view>
    </view>

    <view class="mdlTitle">
      <image class="mdl-img" src="/static/mdl-img/invite-img.png"></image>
      <text>我的邀请码：<text style="font-size: 40rpx">{{userInfo.invite_code}}</text></text>
    </view>
    <view class="mdlTitle">
      <image class="mdl-img" src="/static/mdl-img/popularize-img.png"></image>
      <text>我的推广码：</text>
    </view>

    <view class="qrcode">
      <!-- <image  :src="url" mode="widthFix" class="qrcode-img"></image> -->
	  <tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val" 
	  :size="size" :unit="unit" :background="background" :foreground="foreground"
	   :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" 
	   :loadMake="loadMake" :usingComponents="true" />
      <view>截屏分享给好友</view>
    </view>
    <view class="mdlTitle">
      <image class="mdl-img" src="/static/mdl-img/about-img.png"></image>
      <text>如何赚钱：</text>
    </view>
    <view class="introduction-box">
      <text class="introduction-title">Step1：</text>
      <text class="introduction-text">截屏分享二维码给好友；</text>
    </view>
    <view class="introduction-box">
      <text class="introduction-title">Step2：</text>
      <text class="introduction-text">
        好友扫码二维码进入注册页，邀请码会自动填写，注册后系统将自动锁定成为您的客户, 他们在商城中购买任何商品，您都可以获得推广奖励；
      </text>
    </view>
    <view class="introduction-box">
      <text class="introduction-title">Step3：</text>
      <text class="introduction-text">
        您可以在我的推广码页面查看【我的团队】和【推广奖励】，好友确认收货后奖励方可到账。
      </text>
    </view>
    <view class="mdlTitle">
      <image class="mdl-img" src="/static/mdl-img/hint-img.png"></image>
      <text>提示：</text>
    </view>

    <view class="introduction-box">邀请用户以分享独有的推荐码为准，已注册用户不在邀请范围内。</view>


    <canvas canvas-id="qrcode" v-if ="url == '' " style="opacity: 0;"></canvas>
  </view>
</template>

<script>
import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode'
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
export default {
	components: {
		tkiQrcode
	},
  data() {
    return {
      url : '',
      shareUrl : 'pages/user/mdl/myInvitationCode?invitationCode=132456',
      userInfo : {},
      show : false,
      type:0,
	  
	  ifShow:false,
	  val: '', // 要生成的二维码值
	  size: 200, // 二维码大小
	  unit: 'upx', // 单位
	  background: '#ffffff', // 背景色
	  foreground: '#333333', // 前景色
	  pdground: '#333333', // 角标色
	  icon: '', // 二维码图标
	  iconsize: 40, // 二维码图标大小
	  lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
	  onval: false, // val值变化时自动重新生成二维码
	  loadMake: true, // 组件加载完成后自动生成二维码
	  src: '' // 二维码生成后的图片地址或base64
    };
  },
  onLoad(option){
    this.userInfo = uni.getStorageSync('userInfo') || {};
    this.val = 'http://mudanh5.bxwhl.com/#/pages/public/register?code=' + this.userInfo.invite_code;
	this.ifShow=true
	// console.log(this.userInfo)
 //    uQRCode.make({
 //      canvasId: 'qrcode',
 //      componentInstance: this,
 //      text: this.shareUrl,
 //      size:155,
 //      margin: 8,
 //      backgroundColor: '#ffffff',
 //      foregroundColor: '#000000',
 //      fileType: 'jpg',
 //      correctLevel: uQRCode.defaults.correctLevel,
 //      success: res => {
 //        console.log(res)
 //        this.url = res;
 //        this.show = true;

 //      }
 //    })
  }
}
</script>

<style lang="less" >

page{
  background: #fff;
}
.mdlBox{
  width: 92%;
  margin: 0 auto;
}
.introduction-box{
  margin-bottom: 14px;
  font-size: 24upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #565656;

  .introduction-title{
    display: inline-block;
    width: 110upx;
    vertical-align: top;
    height: 48upx;
    line-height: 48upx;
    font-size: 30upx;
  }
  .introduction-text{
    line-height: 48upx;
    width: 550upx;
    vertical-align: top;
    display: inline-block;
  }
  
}
.qrcode{
  text-align: center;
  margin: 50upx 0 20upx 0;
  color: #E28447;
  .qrcode-img{
    width:320upx;
    height: 320upx;
    border-radius: 10upx;
    background: url("../../../static/mdl-img/border-img.png") no-repeat;
    background-size: 100% 100%;
    padding: 8upx;
  }
}
.mdlBoxTitle{
  font-size: 32upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #343434;
  margin-top: 40upx;
  line-height: 60upx;
}

.user-info-box{
  height: 180upx;
  display:flex;
  align-items:center;
  position:relative;
  z-index: 1;
  justify-content: space-between;
  .portrait-box {
    display: flex;
    align-items: center;
    .portrait{
      width: 130upx;
      height: 130upx;
      border:2upx solid #e9e6e6;
      border-radius: 50%;
      padding: 4upx;
    }
    .username {
      font-size:  32upx;
      color: #2d2d2d;
      margin-left: 20upx;
      font-weight: 700;
    }

  }
}
.mdlTitle{
  height: 100upx;
  display: flex;
  align-items: center;
  font-size: 30upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #343434;
  .mdl-img{
    width: 44upx;
    height: 44upx;
    margin-right: 20rpx;
  }
}
</style>
